<template>
    <div class="history_event">
        <el-row>
            <el-col :span="24" class="mb20">
                <el-button type="primary" @click="dialogVisible = true">历史事件刷选</el-button>
            </el-col>
            <el-col :span="24" class="mb20">
                    <span style="background: #00b19d; color: #fff;padding: 2px 4px;font-size: 14px;">
                        事件类型：复机
                    </span>
                    <span style="background: #00b19d; color: #fff;padding: 2px 4px;font-size: 14px;margin-left: 20px;">
                        事件操作人：iotboss
                    </span>
            </el-col>
        </el-row>
        <el-dialog title="高级搜索" :visible.sync="dialogVisible" width="40%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="150px">
                <el-form-item label="事件类型：" prop="value1">
                    <el-select v-model="ruleForm.value1" filterable placeholder="请选择" class="w100">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件操作人：" prop="value2">
                    <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary">查询</el-button>
            </span>
        </el-dialog>
        <el-table :data="tableData" stripe border fit style="width: 100%">
                <el-table-column prop="name" label="事件名称" width="100">
                </el-table-column>
                <el-table-column prop="content" label="事件内容" width="800">
                </el-table-column>
                <el-table-column
                label="事件时间"
                width="170"
                >
                    <template slot-scope="scope">
                        {{ scope.row.date}}
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="事件操作人">
                </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        name: '复机',
                        content: '复机',
                        date: '2018-06-15 10:56:35',
                        user: 'iotboss'
                    },
                    {
                        name: '划拨卡号',
                        content: '划拨批次为： 00000531，被划拨给董金帅分润， 开卡套餐： 新自定义月，测试流量： kb，运营商： 上海电信, 用户业务模式： 自定义套餐(分销-分销)，划拨时间： 2018-06-13 11:31:01，沉默期(月)： 0， 测试后卡状态： 激活，测试期： ，服务周期： ， 是否可续订套餐： 是，是否断网： 否',
                        date: '2018-06-13 11:31:01',
                        user: 'iotboss'
                    },
                    {
                        name: '卡状态变更',
                        content: '卡状态由 待激活 变为 已激活，变更原因: 划拨',
                        date: '2018-06-13 11:31:01',
                        user: 'iotboss'
                    }
                ],
                dialogVisible: false,
                ruleForm: {
                    value1: '',
                    value2: ''
                },
                options1: [
                    {
                        value: '选线一',
                        label: '导入'
                    },
                    {
                        value: '选线二',
                        label: '划拨'
                    },
                    {
                        value: '选线三',
                        label: '提交实名认证'
                    },{
                        value: '选线四',
                        label: '平台'
                    }
                ],
                 options2: [
                    {
                        value: '选线一',
                        label: 'iotboss'
                    },
                    {
                        value: '选线二',
                        label: '董金帅分润'
                    },
                    {
                        value: '选线三',
                        label: '平台'
                    },{
                        value: '选线四',
                        label: '平台API'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }
</style>